// import './index.less'
import style from './index.module.css';
import { CaretDownOutlined } from '@ant-design/icons';
import { Resizable } from 'react-resizable';
import React, { useEffect, useState } from 'react';
import { Table, Input, Button, Modal, Divider, Radio } from 'antd';
import request from 'umi-request';
import './index.less'; //内部样式的书写
import { DownOutlined } from '@ant-design/icons';
import { Col, Form, Row, Select, theme, message } from 'antd';
// import './iconfont/iconfont.css';

const { Option } = Select;
const provinceData = ['总经办', '综合管理部', '投资发展部', '人事行政部'];

const cityData = {
  总经办: ['总经理', '副总经理'],
  综合管理部: ['总裁助理', '网络管理员', '法务专员'],
  投资发展部: [],
  人事行政部: [
    '人力资源主管',
    '行政主管',
    '招聘专员',
    '培训专员',
    '人力资源专员',
  ],
};
type CityName = keyof typeof cityData;
import {
  CarryOutOutlined,
  CheckOutlined,
  FormOutlined,
  MehOutlined,
} from '@ant-design/icons';
export default function index() {
  // 联动选择
  const [cities, setCities] = useState(cityData[provinceData[0] as CityName]);
  const [secondCity, setSecondCity] = useState(
    cityData[provinceData[0] as CityName][0],
  );

  const handleProvinceChange = (value: CityName) => {
    setCities(cityData[value]);
    setSecondCity(cityData[value][0]);
    setvalue7(value);
  };

  const onSecondCityChange = (value: CityName) => {
    setSecondCity(value);
    setvalue8(value);
  };
  // 添加
  const [ids, setids] = useState([]);
  // 选择
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      setids(selectedRows);
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User',
      // Column configuration not to be checked
      name: record.name,
    }),
  };
  const [selectionType, setSelectionType] = useState('checkbox');
  const [open1, setOpen1] = useState(false);
  const showModal = () => {
    setOpen1(true);
  };
  const hideModal = () => {
    setOpen1(false);
  };
  const [open2, setOpen2] = useState(false);
  const showModal2 = () => {
    setOpen2(true);
  };
  const hideModal2 = () => {
    console.log(ids);
    ids.map((item) => {
      request
        .delete('http://localhost:8597/hqh/get_personnel?id=' + item._id)
        .then((val1) => {
          request.get('http://localhost:8597/hqh/get_personnel').then((val) => {
            setDatalist(val.data);
            setPagecount(val.datacount);
            setPagesize(val.datapage);
          });
        });
    });
    setids([]);
    setOpen2(false);
  };

  const treeData = [
    {
      title: '总经办',
      key: '0-0',
      children: [
        {
          title: '综合管理部',
          key: '0-0-1',
          icon: <MehOutlined />,
        },
        {
          title: '投资发展部',
          key: '0-0-2',
          icon: <MehOutlined />,
        },
        {
          title: '人事行政部',
          key: '0-0-3',
          icon: <MehOutlined />,
        },
        {
          title: '财务部',
          key: '0-0-4',
          icon: <MehOutlined />,
        },
        {
          title: '企管部',
          key: '0-0-5',
          icon: <MehOutlined />,
        },
        {
          title: '研发部',
          key: '0-0-6',
          icon: <MehOutlined />,
        },
        {
          title: '经营部',
          key: '0-0-7',
          children: [
            {
              title: '市场部',
              key: '0-0-8',
              icon: <MehOutlined />,
            },
            {
              title: '销售部',
              key: '0-0-9',
              icon: <MehOutlined />,
            },
            {
              title: '渠道部',
              key: '0-0-10',
              icon: <MehOutlined />,
            },
            {
              title: '运维部',
              key: '0-0-11',
              icon: <MehOutlined />,
            },
            {
              title: '大客户部',
              key: '0-0-12',
              icon: <MehOutlined />,
            },
          ],
        },
        {
          title: '未知',
          key: '0-0-13',
          icon: <MehOutlined />,
        },
      ],
    },
  ];
  // 数组建
  const [showLine, setShowLine] = useState(true);
  const [showIcon, setShowIcon] = useState(false);
  const [showLeafIcon, setShowLeafIcon] = useState(true);
  const onSelect = (selectedKeys, info) => {
    console.log('selected', info.node.title);
    request
      .get('http://localhost:8597/hqh/get_personnel?name=' + info.node.title)
      .then((val) => {
        setDatalist(val.data);
        setPagecount(val.datacount);
        setPagesize(val.datapage);
      });
  };

  const [datalist, setDatalist] = useState([]); //  总数据渲染
  const [pagesize, setPagesize] = useState(0); // 一共多少页
  const [pagecount, setPagecount] = useState(0); // 数据条数
  const [inputpagesize, setiInputpagesize] = useState(1); // 输入框数据
  const [dcolumns, setDcolumns] = useState([]);
  const [components, setComponents] = useState({});
  const defaultColumns = [
    {
      title: '序号',
      key: '_id',
      width: 70,
      render: (text, record, index) => <>{index + 1}</>,
      ellipsis: true,
    },
    {
      title: '档案ID',
      key: 'id',
      width: 250,
      dataIndex: 'id',
      ellipsis: true,
    },
    {
      title: '档案编号',
      dataIndex: 'ids',
      key: 'ids',
      ellipsis: true,
      width: 150,
    },
    {
      title: '真实姓名',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
      width: 130,
      render: (text) => <a style={{ color: '#9682e4' }}>{text}</a>,
    },
    {
      title: '登陆账号',
      dataIndex: 'username',
      key: 'username',
      ellipsis: true,
      width: 130,
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      ellipsis: true,
      width: 130,
    },
    {
      title: '联系电话',
      dataIndex: 'lianxidianhua',
      key: 'lianxidianhua',
      ellipsis: true,
      width: 130,
    },
    {
      title: '出生日期',
      dataIndex: 'chsshengriqi',
      key: 'chsshengriqi',
      ellipsis: true,
      width: 130,
    },
    {
      title: '所在部门',
      dataIndex: 'suozaibumeng',
      key: 'suozaibumeng',
      ellipsis: true,
      width: 130,
    },
    {
      title: '所在岗位',
      dataIndex: 'suozaigangwei',
      key: 'suozaigangwei',
      ellipsis: true,
      width: 130,
    },
    {
      title: '入职时间',
      dataIndex: 'ruzhishijain',
      key: 'ruzhishijain',
      ellipsis: true,
      width: 130,
    },
  ];
  const [value1, setvalue1] = useState('');
  useEffect(() => {
    request.get('http://localhost:8597/hqh/get_personnels').then((val) => {
      if (val.data.length > 0) {
        setvalue_id(val.data[0]._id);
        setvalue1(val.data[0].id);
        setvalue2(val.data[0].ids);
        setvalue3(val.data[0].username);
        setvalue4(val.data[0].sex);
        setvalue5(val.data[0].name);
        setvalue6(val.data[0].lianxidianhua);
        setvalue7(val.data[0].suozaibumeng);
        setvalue8(val.data[0].suozaigangwei);
        setvalue9(val.data[0].lingdao_id);
      }
    });
    request.get('http://localhost:8597/hqh/get_personnel').then((val) => {
      setDatalist(val.data);
      setPagecount(val.datacount);
      setPagesize(val.datapage);
    });

    setDcolumns(defaultColumns);
    setComponents({
      header: {
        cell: ResizeableTitle,
      },
    });
  }, []);

  const ResizeableTitle = (props) => {
    const { onResize, width = 130, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }

    return (
      <Resizable width={width} height={0} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index) =>
    (e, { size }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setDcolumns(nextColumns);
    };

  const columns = dcolumns.map((col, index) => ({
    ...col,
    onHeaderCell: (column) => ({
      width: col.width || 130, // 130 没有设置宽度可以在此写死 例如130试下
      onResize: handleResize(index),
    }),
  }));
  const listStyle = {
    lineHeight: '200px',
    textAlign: 'center',
    marginTop: 16,
  };
  // 表格输入数据
  const [value_id, setvalue_id] = useState('');
  const [value2, setvalue2] = useState('');
  const [value3_name, setvalue3] = useState('');
  const [value4, setvalue4] = useState('');
  const [value5, setvalue5] = useState('');
  const [value6, setvalue6] = useState('');
  const [value7, setvalue7] = useState('');
  const [value8, setvalue8] = useState('');
  const [value9, setvalue9] = useState('63dca9c9c297c599e45e05c5');
  const clickChange = () => {
    console.log(111);
    // props.history.push('/info/draft')
  };

  return (
    <div className={style.box}>
      <div className={style.header}>
        <button
          onClick={() => {
            if (
              // value3_name.length != 0 &&
              value4.length != 0 &&
              value5.length != 0 &&
              value6.length != 0 &&
              value7.length != 0 &&
              value8.length != 0 &&
              value9.length != 0
            ) {
              let insetdata = {
                id: value_id, // 档案ID
                ids: value_id, // 档案编号
                name: value5, // 真实姓名
                username: value3_name, // 登录账号
                sex: value4, // 性别
                lianxidianhua: value6, // 联系电话
                suozaibumeng: value7, // 所在部门
                suozaigangwei: value8, // 所在岗位
                lingdao_id: '63d8700739651041768abdb9', // 领导
              };
              if (value_id) {
                request
                  .put(
                    'http://localhost:8597/hqh/get_personnels?id=' + value_id,
                    {
                      data: { insetdata },
                    },
                  )
                  .then((val111) => {
                    request
                      .get('http://localhost:8597/hqh/get_personnels')
                      .then((val) => {
                        // setvalue_id(val.data[0]._id)
                        setvalue1(val.data[0].id);
                        setvalue2(val.data[0].ids);
                        setvalue3(val.data[0].username);
                        setvalue4(val.data[0].sex);
                        setvalue5(val.data[0].name);
                        setvalue6(val.data[0].lianxidianhua);
                        setvalue7(val.data[0].suozaibumeng);
                        setvalue8(val.data[0].suozaigangwei);
                        setvalue9(val.data[0].lingdao_id);
                      });
                  });
              } else {
                request
                  .post('http://localhost:8597/hqh/get_personnels', {
                    data: { insetdata },
                  })
                  .then((val11) => {
                    request
                      .get('http://localhost:8597/hqh/get_personnels')
                      .then((val) => {
                        console.log(val.data[0]._id);

                        setvalue1(val.data[0].id);
                        setvalue_id(val.data[0]._id);
                        setvalue2(val.data[0].ids);
                        setvalue3(val.data[0].username);
                        setvalue4(val.data[0].sex);
                        setvalue5(val.data[0].name);
                        setvalue6(val.data[0].lianxidianhua);
                        setvalue7(val.data[0].suozaibumeng);
                        setvalue8(val.data[0].suozaigangwei);
                        setvalue9(val.data[0].lingdao_id);
                      });
                  });
              }
            } else {
              message.error('请填写全部信息');
            }
          }}
        >
          保存
        </button>
        <button
          onClick={() => {
            if (
              // value3_name.length != 0 &&
              value4.length != 0 &&
              value5.length != 0 &&
              value6.length != 0 &&
              value7.length != 0 &&
              value8.length != 0 &&
              value9.length != 0
            ) {
              let insetdata = {
                id: value_id, // 档案ID
                ids: value_id, // 档案编号
                name: value5, // 真实姓名
                username: value3_name, // 登录账号
                sex: value4, // 性别
                lianxidianhua: value6, // 联系电话
                suozaibumeng: value7, // 所在部门
                suozaigangwei: value8, // 所在岗位
                lingdao_id: '63d8700739651041768abdb9', // 领导
              };

              request
                .post('http://localhost:8597/hqh/get_personnel', {
                  data: { insetdata },
                })
                .then((val) => {
                  if (value_id) {
                    request
                      .delete(
                        'http://localhost:8597/hqh/get_personnels?id=' +
                          value_id,
                      )
                      .then((val) => {
                        setvalue1('');
                        setvalue2('');
                        setvalue3('');
                        setvalue4('');
                        setvalue5('');
                        setvalue6('');
                        setvalue7('');
                        setvalue8('');
                        setvalue_id('');
                      });
                  } else {
                    setvalue1('');
                    setvalue2('');
                    setvalue3('');
                    setvalue4('');
                    setvalue5('');
                    setvalue6('');
                    setvalue7('');
                    setvalue8('');
                    setvalue_id('');
                  }
                });
            } else {
              message.error('请填写全部信息');
            }
          }}
        >
          保存且新增
        </button>
        <button
          onClick={() => {
            if (value_id) {
              console.log(value_id);
              request
                .delete(
                  'http://localhost:8597/hqh/get_personnels?id=' + value_id,
                )
                .then((val) => {
                  setvalue1('');
                  setvalue2('');
                  setvalue3('');
                  setvalue4('');
                  setvalue5('');
                  setvalue6('');
                  setvalue7('');
                  setvalue_id('');
                  setvalue8('');
                });
            } else {
              message.error('没有要删除的数据');
            }
          }}
        >
          删除
          {/* <CaretDownOutlined style={{padding:"0",margin:'0'}} /> */}
        </button>
        <button>查看日志</button>
      </div>
      {/*

       */}
      <div className={style.container}>
        <header>
          <h1>人员档案</h1>
        </header>
        <table className={style.tables}>
          <thead>
            <tr>
              <td colSpan={6}>基本信息</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>档案编号：</td>
              <td>
                {' '}
                <Input placeholder="保存后自动生成" disabled value={value_id} />
              </td>
              <td>登陆账号：</td>
              <td>
                {' '}
                <Input
                  placeholder="请输入"
                  value={value3_name}
                  onChange={(e) => {
                    setvalue3(e.target.value);
                  }}
                />
              </td>
              <td rowSpan={11}>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证件照-宽
                200px ，高 215px:
              </td>
              <td rowSpan={11}>
                <img src="https://erpdemo.fanpusoft.com/UpLoader/Image/202103/637518604254601287_11.jpg"></img>
              </td>
            </tr>
            <tr>
              <td>*真实姓名：</td>
              <td>
                {' '}
                <Input
                  placeholder="请输入"
                  value={value5}
                  onChange={(e) => {
                    setvalue5(e.target.value);
                  }}
                />
              </td>
              <td>性别：</td>
              <td>
                {' '}
                <Input
                  placeholder="请输入"
                  value={value4}
                  onChange={(e) => {
                    setvalue4(e.target.value);
                  }}
                />
              </td>
            </tr>
            <tr>
              <td>出生日期：</td>
              <td>2018-01-16</td>
              <td>身份证号码</td>
              <td>511621198501206376</td>
            </tr>
            <tr>
              <td>政治面貌：</td>
              <td>群众</td>
              <td>婚姻状况：</td>
              <td>未婚</td>
            </tr>
            <tr>
              <td>国籍：</td>
              <td></td>
              <td>籍贯：</td>
              <td></td>
            </tr>
            <tr>
              <td>民族：</td>
              <td>汉族</td>
              <td>户口性质：</td>
              <td>城镇户口</td>
            </tr>
            <tr>
              <td>*联系电话：</td>
              <td>
                {' '}
                <Input
                  placeholder="请输入"
                  value={value6}
                  onChange={(e) => {
                    setvalue6(e.target.value);
                  }}
                />
              </td>
              <td>电子邮箱：</td>
              <td>1183849539@qq.com</td>
            </tr>
            <tr>
              <td>微信号：</td>
              <td></td>
              <td>QQ号：</td>
              <td></td>
            </tr>
            <tr>
              <td>紧急联系人：</td>
              <td></td>
              <td>紧急联系人电话：</td>
              <td></td>
            </tr>
            <tr>
              <td>户口地址：</td>
              <td colSpan={3}></td>
            </tr>
            <tr>
              <td>家庭住址：</td>
              <td colSpan={3}>重庆市沙坪坝歌乐山</td>
            </tr>
            <tr style={{ height: '65px' }}>
              <td>提示：</td>
              <td colSpan={5} style={{ color: '#000' }}>
                1,新建用户时，系统会自动创建对应的档案信息，然后在人员档案列表里边选择档案进行资料完善；
                <br />
                2,只需要录入人员档案信息，不需要给他创建登录系统登录账号时，才在这里新建，注意不要重复创建。
              </td>
            </tr>
          </tbody>
        </table>
        <table className={style.table2}>
          <thead>
            <tr>
              <td colSpan={6}>入职信息</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>入职时间：</td>
              <td>2018-01-16</td>
              <td>转正日期：</td>
              <td></td>
              <td>离职时间：</td>
              <td></td>
            </tr>
            <tr>
              <td>所在部门：</td>
              <td>
                {' '}
                <Select
                  style={{ width: 120 }}
                  onChange={handleProvinceChange}
                  options={provinceData.map((province) => ({
                    label: province,
                    value: province,
                  }))}
                />
              </td>
              <td>所在岗位：</td>
              <td>
                {' '}
                <Select
                  style={{ width: 120 }}
                  value={secondCity}
                  onChange={onSecondCityChange}
                  options={cities.map((city) => ({
                    label: city,
                    value: city,
                  }))}
                />
              </td>
              <td>*直接上级：</td>
              <td>胡建</td>
            </tr>
            <tr>
              <td>银行开户行：</td>
              <td></td>
              <td>开户名：</td>
              <td></td>
              <td>银行卡号：</td>
              <td></td>
            </tr>
            <tr>
              <td>社保卡号：</td>
              <td>51302119611162847</td>
              <td>公积金号：</td>
              <td></td>
              <td>工作排班：</td>
              <td>正常班</td>
            </tr>
            <tr>
              <td>职称等级：</td>
              <td>初级职称</td>
              <td>员工类型：</td>
              <td>全职</td>
              <td>员工状态：</td>
              <td>正式</td>
            </tr>
          </tbody>
        </table>
        <table className={style.table3}>
          <thead>
            <tr>
              <td colSpan={6}>
                教育经历<button>导出</button>
              </td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>序号</td>
              <td>开始时间</td>
              <td>结束时间</td>
              <td>学校名称</td>
              <td>专业</td>
              <td>学历</td>
            </tr>
            <tr style={{ height: '65px' }}>
              <td colSpan={6}></td>
            </tr>
            <tr style={{ height: '70px' }}>
              <td colSpan={6}></td>
            </tr>
          </tbody>
        </table>
        {/* 工作经历表格 */}
        <table className={style.table3}>
          <thead>
            <tr>
              <td colSpan={7}>
                工作经历<button>导出</button>
              </td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>序号</td>
              <td>开始时间</td>
              <td>结束时间</td>
              <td>工作单位</td>
              <td>所在部门</td>
              <td>工作内容</td>
              <td>离职原因</td>
            </tr>
            <tr style={{ height: '65px' }}>
              <td colSpan={7}></td>
            </tr>
            <tr style={{ height: '70px' }}>
              <td colSpan={7}></td>
            </tr>
          </tbody>
        </table>
        {/* 简历上传 */}
        <table className={style.table3}>
          <thead>
            <tr>
              <td colSpan={8}>简历上传</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td
                style={{ width: '55%', textAlign: 'left', paddingLeft: '15px' }}
              >
                文件名称
              </td>
              <td style={{ width: '9%' }}>文件大小</td>
              <td style={{ width: '9%' }}>上传人</td>
              <td style={{ width: '9%' }}>上传时间</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{ height: '65px' }}>
              <td colSpan={8}></td>
            </tr>
          </tbody>
        </table>
        <div className="modelSelect">
          <Modal
            closable={false}
            title="对话提示框"
            open={open1}
            onOk={hideModal}
            onCancel={hideModal}
            okText="确认"
            cancelText=""
          >
            <p>请选择要删除的数据</p>
          </Modal>

          <Modal
            title="删除提示"
            open={open2}
            onOk={hideModal2}
            onCancel={hideModal2}
            okText="确认"
            cancelText="取消"
          >
            <p>是否确定要删除选中记录？</p>
          </Modal>
        </div>
      </div>
    </div>
  );
}
